﻿@model IEnumerable<OWE.Core.Domain.AccountMove>

@{
    ViewBag.Title = "List";
    Layout = "~/Views/Shared/_MainLayout.cshtml";
}

@section Styles {
    <link rel="stylesheet" type="text/css" href="~/Content/assets/global/plugins/select2/select2.css" />
    <link rel="stylesheet" href="~/Content/assets/global/plugins/data-tables/DT_bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/assets/global/plugins/bootstrap-datepicker/css/datepicker.css" />
}

@section Plugins
{
    <script type="text/javascript" src="~/Content/assets/global/plugins/select2/select2.min.js"></script>
    <script type="text/javascript" src="~/Content/assets/global/plugins/data-tables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="~/Content/assets/global/plugins/data-tables/DT_bootstrap.js"></script>
    <script type="text/javascript" src="~/Content/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
}

@section Scripts
{
    <script src="~/Content/assets/global/scripts/metronic.js" type="text/javascript"></script>
    <script src="~/Content/assets/admin/layout/scripts/layout.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/scripts/datatable.js"></script>

    <script>
        console.log('-');
        var TableAjax = function () {

            var initPickers = function () {
                //init date pickers
                $('.date-picker').datepicker({
                    rtl: Metronic.isRTL(),
                    autoclose: true
                });
            }

            var handleRecords = function () {

                var grid = new Datatable();
                grid.init({
                    src: $("#datatable_ajax"),
                    onSuccess: function (grid) {
                        // execute some code after table records loaded
                    },
                    onError: function (grid) {
                        // execute some code on network or other general error  
                    },
                    dataTable: {  // here you can define a typical datatable settings from http://datatables.net/usage/options 
                    /* 
                            By default the ajax datatable's layout is horizontally scrollable and this can cause an issue of dropdown menu is used in the table rows which.
                            Use below "sDom" value for the datatable layout if you want to have a dropdown menu for each row in the datatable. But this disables the horizontal scroll. 
                        */
                        //"sDom" : "<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>r>>", 

                        "aLengthMenu": [
                            [20, 50, 100, 150, -1],
                            [20, 50, 100, 150, "All"] // change per page values here
                        ],
                        "iDisplayLength": 20, // default record count per page
                        "bServerSide": true, // server side processing
                        "sAjaxSource": "@Url.Action("ListJson")", // ajax source
                        "aaSorting": [[1, "asc"]] // set first column as a default sort by asc
                    }
                });

                // handle group actionsubmit button click
                grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
                    e.preventDefault();
                    var action = $(".table-group-action-input", grid.getTableWrapper());
                    if (action.val() != "" && grid.getSelectedRowsCount() > 0) {
                        grid.addAjaxParam("sAction", "group_action");
                        grid.addAjaxParam("sGroupActionName", action.val());
                        var records = grid.getSelectedRows();
                        for (var i in records) {
                            grid.addAjaxParam(records[i]["name"], records[i]["value"]);
                        }
                        grid.getDataTable().fnDraw();
                        grid.clearAjaxParams();
                    } else if (action.val() == "") {
                        Metronic.alert({ type: 'danger', icon: 'warning', message: 'Please select an action', container: grid.getTableWrapper(), place: 'prepend' });
                    } else if (grid.getSelectedRowsCount() === 0) {
                        Metronic.alert({ type: 'danger', icon: 'warning', message: 'No record selected', container: grid.getTableWrapper(), place: 'prepend' });
                    }
                });

            }

            return {

                //main function to initiate the module
                init: function () {

                    initPickers();
                    handleRecords();
                }

            };

        }();
    </script>

    <script>
        jQuery(document).ready(function () {
            Metronic.init(); // init metronic core components
            Layout.init(); // init current layout
            TableAjax.init();
        });
    </script>
}

<div class="row">
    <div class="col-md-12">
        <!-- Begin: life time stats -->
        <div class="portlet">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-shopping-cart"></i>Order Listing
                </div>
                <div class="actions">
                    <a href="#" class="btn default yellow-stripe">
                        <i class="fa fa-plus"></i>
                        <span class="hidden-480">New Order </span>
                    </a>
                    <div class="btn-group">
                        <a class="btn default yellow-stripe" href="#" data-toggle="dropdown">
                            <i class="fa fa-share"></i>
                            <span class="hidden-480">Tools </span>
                            <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="#">Export to Excel </a>
                            </li>
                            <li>
                                <a href="#">Export to CSV </a>
                            </li>
                            <li>
                                <a href="#">Export to XML </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="#">Print Invoices </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-container">
                    <div class="table-actions-wrapper">
                        <span></span>
                        <select class="table-group-action-input form-control input-inline input-small input-sm">
                            <option value="">Select...</option>
                            <option value="Cancel">Cancel</option>
                            <option value="Cancel">Hold</option>
                            <option value="Cancel">On Hold</option>
                            <option value="Close">Close</option>
                        </select>
                        <button class="btn btn-sm yellow table-group-action-submit"><i class="fa fa-check"></i>Submit</button>
                    </div>
                    <table class="table table-striped table-bordered table-hover" id="datatable_ajax">
                        <thead>
                            <tr role="row" class="heading">
                                <th width="5%">
                                    <input type="checkbox" class="group-checkable">
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Code)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Name)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.AccountTypeName)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Debit)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Credit)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Balance)
                                </th>
                            </tr>
                            <tr role="row" class="filter">
                                <td></td>
                                <td>
                                    <input type="text" class="form-control form-filter input-sm" name="order_id">
                                </td>
                                <td>
                                    <div class="input-group date date-picker margin-bottom-5" data-date-format="dd/mm/yyyy">
                                        <input type="text" class="form-control form-filter input-sm" readonly name="order_date_from" placeholder="From">
                                        <span class="input-group-btn">
                                            <button class="btn btn-sm default" type="button"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>
                                    <div class="input-group date date-picker" data-date-format="dd/mm/yyyy">
                                        <input type="text" class="form-control form-filter input-sm" readonly name="order_date_to" placeholder="To">
                                        <span class="input-group-btn">
                                            <button class="btn btn-sm default" type="button"><i class="fa fa-calendar"></i></button>
                                        </span>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" class="form-control form-filter input-sm" name="order_customer_name">
                                </td>
                                <td>
                                    <input type="text" class="form-control form-filter input-sm" name="order_ship_to">
                                </td>
                                <td>
                                    <div class="margin-bottom-5">
                                        <input type="text" class="form-control form-filter input-sm" name="order_price_from" placeholder="From" />
                                    </div>
                                    <input type="text" class="form-control form-filter input-sm" name="order_price_to" placeholder="To" />
                                </td>
                                <td>
                                    <div class="margin-bottom-5">
                                        <input type="text" class="form-control form-filter input-sm margin-bottom-5 clearfix" name="order_quantity_from" placeholder="From" />
                                    </div>
                                    <input type="text" class="form-control form-filter input-sm" name="order_quantity_to" placeholder="To" />
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- End: life time stats -->
    </div>
</div>
